<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>			
		* {padding: 0;	
		margin: 1px;}						
		#calculate {margin: auto;				
		margin-top: 10px;				
		border: solid 6px dimgrey;				
		border-spacing: 0px;}						
		#display {	width: 100%;
		height: 30px;
		border-bottom: solid 4px darkgray;				
		font-weight: bold;				
		color: #gray;				
		font-family: 黑体;				
		padding-left: 2px;}						
		#equal {cursor: pointer;				
		width: 40px;				
		height: 100%;				
		background: dimgrey;				
		border: solid 1px #FFFFFF;				
		color: #ffffff;				
		text-align: center;				
		font-weight: bold;				
		font-family: 黑体;			
		}						
		.numberkey {cursor: pointer;				
		width: 40px;				
		height: 30px;				
		border: solid 1px #FFFFFF;				
		background: gray;				
		color: #ffffff;				
		text-align: center;				
		font-weight: bold;				
		font-family: 黑体;			
		}						
		.numberkey:hover{	background: #696969;}						
		#equal:hover{background: lightgrey;	}		
		</style>	
	</head>
	<body>
	</head> 
	<body>		
	<table id="calculate" οnclick="calculater()">			
	<tr>				
	<td id="display" colspan="5">0</td>			
	</tr>			
	<tr>				
	<td class="numberkey">1</td>				
	<td class="numberkey">2</td>				
	<td class="numberkey">3</td>				
	<td class="numberkey">+</td>				
	<td class="numberkey" οnclick="del()">C</td>			
	</tr>			
	<tr>				
	<td class="numberkey">4</td>
					
	<td class="numberkey">5</td>				
					
	<td class="numberkey">6</td>				
	<td class="numberkey">-</td>				
	<td rowspan="3" id="equal" οnclick="resCal()">=</td>			
	</tr>			
	<tr>				
	<td class="numberkey">7</td>				
	<td class="numberkey">8</td>
	<td class="numberkey">9</td>
	<td class="numberkey">*</td>			
	</tr>	
	<tr>
	<td class="numberkey">+/-</td>				
	<td class="numberkey">0</td>				
	<td class="numberkey">.</td>				
	<td class="numberkey">/</td>			
	</tr>		
	</table>	
	</body>
	<script>	
	var results = "";	
	var calres = "";	
	function calculater(){		if(event.srcElement.innerText=="="){			return;		}		
	if(event.srcElement.innerText=="C"){del();	display.innerText="0";			return;		}		
	results += event.srcElement.innerText;		display.innerText = results;	}	
	function resCal(){		calres=eval(results);		display.innerText = calres;		results = calres;	}
		function del(){		results = "";		display.innerText = "";	}</script>
	

				
	
	</body>
</html>
<!-- 	<input  value="1" type="button"/>
		<input  value="2" type="button"/>
		<input  value="3" type="button"/>
		<input  value="4" type="button"/>
		<input  value="5" type="button"/>
		<input  value="6" type="button"/>
		<input  value="7" type="button"/>
		<input  value="8" type="button"/>
		<input  value="9" type="button"/> -->